<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入整个common页面 -->
    <div th:insert="common/common.html"></div>
</head>
<body>
<!-- bootstrap 栅格系统 -->
<div class="container-fluid">
    <div class="row">
        <!-- 左侧导航 -->
        <div class="col-md-3">
            <!-- bootstrap-treeview -->
            <div id="tree"></div>
        </div>
        <!-- 右侧的  标签页-->
        <div class="col-md-9">
            <!-- addTabls导航栏 -->
            <ul class="nav nav-tabs" id="myTab"></ul>
            <!-- addTabs内容容器 -->
            <div class="tab-content"></div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    //treeview  写死的
    function getTree() {
        var tree = [
            {
                text:"系统管理",
                selectedIcon:"glyphicon glyphicon-zoom-in",
                nodes: [
                    {
                        text:"汽车列表",
                        selectedIcon:"glyphicon glyphicon-star",
                        url:"/car/toCarlist",
                        id:2//目的是为了解决tab重复问题
                    }, {
                        text:"汽车类型",
                        selectedIcon:"glyphicon glyphicon-star",
                        url:"/carType/toCarTypeList",
                        id:3//目的是为了解决tab重复问题
                    },{
                        text:"汽车审核",
                        selectedIcon:"glyphicon glyphicon-star",
                        url:"/car/toCarExamineList",
                        id:4//目的是为了解决tab重复问题
                    }
                ]
            },
        ];
        return tree;
    }

    //bootstrap-treeview
    $(function(){
        $('#tree').treeview({
            data: getTree(),
            onNodeSelected:function(event, node) {//节点被点击是调用函数
                if(node.nodes == undefined){//如果该节点下没有其他节点则创建tabs
                    //添加bootstrap-addtabs
                    $.addtabs.add({
                        title:node.text,
                        url:node.url,//内容为该节点的url地址
                        id: node.id,//目的是为了解决tab重复问题
                    })
                }
            }
        });
    })
</script>